import React from 'react';
import ReactEcharts from 'echarts-for-react';

class ChartAPIComponent extends React.Component {
    render() {
        const option = {
            title: {
                text: '漏斗图',
                subtext: '纯属虚构',
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c}%',
            },
            toolbox: {
                feature: {
                    dataView: { readOnly: false },
                    restore: {},
                    saveAsImage: {},
                },
            },
            legend: {
                data: ['展现', '点击', '访问', '咨询', '订单'],
            },
            series: [
                {
                    name: '预期',
                    type: 'funnel',
                    left: '10%',
                    width: '80%',
                    label: {
                        normal: {
                            formatter: '{b}预期',
                        },
                        emphasis: {
                            position: 'inside',
                            formatter: '{b}预期: {c}%',
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false,
                        },
                    },
                    itemStyle: {
                        normal: {
                            opacity: 0.7,
                        },
                    },
                    data: [
                        { value: 60, name: '访问' },
                        { value: 40, name: '咨询' },
                        { value: 20, name: '订单' },
                        { value: 80, name: '点击' },
                        { value: 100, name: '展现' },
                    ],
                },
                {
                    name: '实际',
                    type: 'funnel',
                    left: '10%',
                    width: '80%',
                    maxSize: '80%',
                    label: {
                        normal: {
                            position: 'inside',
                            formatter: '{c}%',
                            textStyle: {
                                color: '#fff',
                            },
                        },
                        emphasis: {
                            position: 'inside',
                            formatter: '{b}实际: {c}%',
                        },
                    },
                    itemStyle: {
                        normal: {
                            opacity: 0.5,
                            borderColor: '#fff',
                            borderWidth: 2,
                        },
                    },
                    data: [
                        { value: 30, name: '访问' },
                        { value: 10, name: '咨询' },
                        { value: 5, name: '订单' },
                        { value: 50, name: '点击' },
                        { value: 80, name: '展现' },
                    ],
                },
            ],
        };

        let code =
            '<ReactEcharts ref={(e) => { this.echarts_react = e; }} \n' +
            '    option={this.getOtion()} /> \n' +
            '\n' +
            '// use echarts API: http://echarts.baidu.com/api.html#echartsInstance' +
            'this.echarts_react.getEchartsInstance().getDataURL();';
        return (
            <div className="examples">
                <div className="parent">
                    <label>
                        {' '}
                        use echarts API With <strong> getEchartsInstance() </strong>: (the API will
                        return the echarts instance, then you can use any API of echarts.)
                    </label>
                    <ReactEcharts
                        ref={e => {
                            this.echarts_react = e;
                        }}
                        option={option}
                    />
                    <label>
                        {' '}
                        code below: (echarts API list see:
                        http://echarts.baidu.com/api.html#echartsInstance)
                    </label>
                    <pre>
                        <code>{code}</code>
                    </pre>
                </div>
            </div>
        );
    }
}

export default ChartAPIComponent;
